<html>
  <head>
    <title>Embark - SimpleStorage Demo</title>
     <link rel="stylesheet" href="css/app.css">
    <script src="js/jquery.js"></script>
     <script src="js/bootstrap.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  </head>
  <body class="container">
    <div id="root"></div>

    <h1>Embark - Usage Example</h1>

    <ul class="nav nav-tabs" role="tablist" id="myTabs">
      <li role="presentation" class="active"><a href="#blockchain" aria-controls="blockchain" role="tab" data-toggle="tab">Blockchain</a></li>
      <li role="presentation"><a href="#storage" aria-controls="storage" role="tab" data-toggle="tab">Decentralized Storage (IPFS)<span class="pull-right" id="status-storage"></a></li>
      <li role="presentation"><a href="#communication" aria-controls="communication" role="tab" data-toggle="tab">P2P communication (Whisper/Orbit)<span class="pull-right" id="status-communication"></span></a></li>
      <li role="presentation"><a href="#namesystem" aria-controls="namesystem" role="tab" data-toggle="tab">Namesystem (ENS)<span class="pull-right" id="status-namesystem"></span></a></li>
    </ul>

    <div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="blockchain">
        <h3> 1. Set the value in the blockchain</h3>
        <div class="form-group form-inline">
          <input type="text" class="text form-control" value="10">
          <button class="set btn btn-primary">Set Value</button>
          <p>Once you set the value, the transaction will need to be mined and then the value will be updated on the blockchain.</p>
        </div>

        <h3> 2. Get the current value</h3>
        <div class="form-group">
          <div>
            current value is <span class="value"></span>
          </div>
          <button class="get btn btn-primary">Get Value</button>
          <p>Click the button to get the current value. The initial value is 100.</p>
        </div>

        <h3> 3. Contract Calls </h3>
        <p>Javascript calls being made: </p>
        <div class="logs">
        </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="storage">
        <div class="error alert alert-danger" role="alert">The node you are using does not support IPFS. Please ensure <a href="https://github.com/ipfs/js-ipfs-http-client#cors" target="_blank">CORS</a> is setup for the IPFS node.</div>
        <div id="storage-controls">

        <h3>Save text to IPFS</h3>
        <div class="form-group form-inline">
          <input type="text" class="ipfsText text form-control" value="hello world!">
          <button class="setIpfsText btn btn-primary">Save</button>
          <p>generated Hash: <span class="textHash"></span></p>
        </div>

        <h3>Load text from IPFS given an hash</h3>
        <div class="form-group form-inline">
          <input type="text" class="textHash text form-control" size="60">
          <button class="loadIpfsHash set btn btn-primary">Load</button>
          <p>result: <span class="ipfsText"></span></p>
        </div>

        <h3>upload file to ipfs</h3>
        <div class="form-group form-inline">
          <input type="file" class="form-control">
          <button class="uploadFile set btn btn-primary">upload</button>
          <p>generated hash: <span class="fileIpfsHash"></span></p>
        </div>

        <h3>Get file or image from ipfs</h3>
        <div class="form-group form-inline">
          <input type="text" class="fileIpfsHash form-control" size="60">
          <button class="loadIpfsFile set btn btn-primary">Load</button>
          <p>file available at: <span class="ipfsFileUrl"></span></p>
          <p><img class="ipfsImage" src=""></p>
        </div>

        <p>Javascript calls being made: </p>
        <div class="logs">
          <br> EmbarkJS.Storage.setProvider('ipfs',{server: 'localhost', port: '5001'})
        </div>
      </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="communication">
        <div class="error alert alert-danger" role="alert">The node you are using does not support Whisper</div>
        <div class="errorVersion alert alert-danger" role="alert">The node uses an unsupported version of Whisper</div>
        <div id="communication-controls">
        <h3>Listen To channel</h3>
        <div class="form-group form-inline listen">
          <input type="text" class="channel text form-control" placeholder="channel">
          <button class="listenToChannel set btn btn-primary">Start Listening</button>
          <div id="subscribeList"></div>
          <p>messages received:<p>
          <div id="messagesList"></div>
        </div>

        <h3>Send Message</h3>
        <div class="form-group form-inline send">
          <input type="text" class="channel text form-control" placeholder="channel">
          <input type="text" class="message text form-control" placeholder="message">
          <button class="sendMessage set btn btn-primary">Send Message</button>
        </div>

        <p>Javascript calls being made: </p>
        <div class="logs">
          <br> EmbarkJS.Messages.setProvider('whisper')
        </div>
      </div>
    </div>
    <div role="tabpanel" class="tab-pane" id="namesystem">
      <div class="alert alert-danger not-enabled" role="alert">ENS is not enabled</div>
      <div id="namesystem-controls">
        <div class="resolve">
          <h3>Resolve a name</h3>
          <div class="error alert alert-danger" role="alert"></div>
          <div class="success alert alert-success" role="alert"></div>
          <div class="inline-input-btn form-group form-inline">
            <input type="text" class="form-control" value="eth" size="60">
            <button id="resolve" type="button" class="btn btn-primary">Resolve name</button>
          </div>
        </div>
        <div class="lookup">
          <h3>Lookup an address</h3>
          <div class="error alert alert-danger" role="alert"></div>
          <div class="success alert alert-success" role="alert"></div>
          <div class="inline-input-btn form-group form-inline">
            <input type="text" class="form-control" size="60">
            <button id="lookup" type="button" class="btn btn-primary">Lookup address</button>
          </div>
        </div>
        <div class="register">
          <h3>Register subdomain</h3>
          <div class="error alert alert-danger" role="alert"></div>
          <div class="success alert alert-success" role="alert"></div>
          <div class="form-group">
            <input type="text" class="small-input float-left form-control name" size="60" placeholder="subdomain (ie 'test' resulting in 'test.embark.eth' assuming the root domain is 'embark.eth')">
            <input type="text" class="form-control address" size="60" placeholder="subdomain address">
            <button id="register" type="button" class="btn btn-primary">Register subdomain</button>
          </div>
        </div>
        <div class="form-group">
          <h3>Embark Calls </h3>
          <p>Javascript calls being made: </p>
          <div class="logs"></div>
        </div>
      </div>
    </div>

    <script src="js/app.js" charset="UTF-8"></script>
  </body>
</html>
